<include file="public@media_head">
<div class="container-fluid">
    <div class="photo-top-container mb-3">
        <div class="row">
            <div class="col-sm-12 col-md-7">
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <a href="photoDetail.html"><img src="__TMPL__/public/assets/images/upload/photo_banner01.jpg"></a>
                        </div>
                        <div class="swiper-slide">
                            <a href="photoDetail.html"><img src="__TMPL__/public/assets/images/upload/photo_banner01.jpg"></a>
                        </div>
                        <div class="swiper-slide">
                            <a href="photoDetail.html"><img src="__TMPL__/public/assets/images/upload/photo_banner01.jpg"></a>
                        </div>
                    </div>
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
            <div class="col-sm-12 col-md-5">
                <div class="textures-info">
                    <h3>图片</h3>
                    <h5 class="title text-justify text-ellipsis">图片主题的具体的名称文字比内容摘要的文字要大 (25张)</h5>
                    <h6 class="subtitle mb-3 text-ellipsis">
                        来源：CIASLL-CMS&nbsp;&nbsp;更新时间：2017-03-01&nbsp;&nbsp;阅读：201</h6>
                    <div class="content">
                        2018年1月31日专业航拍社交平台SkyPixel天空之城(TM)当日宣布，与DJI大疆创新合办的2017年天空之城摄影大赛圆满结束，本次比赛吸引到自全球近150个国家和地区的用户参加，收到了超过44,800份作品。全球航拍年度大奖《冰上魅影》
                    </div>
                    <div>

                    </div>
                    <div class="mt-4">
                        <p class="cis-operate float-right">
                            <a class="item"><i class="iconcis icon-star"></i>收藏</a>
                            <a class="item"><i class="iconcis icon-zan"></i>赞&nbsp;104</a>
                            <a class="item"><i class="iconcis icon-message"></i>评论&nbsp;94</a>
                            <span><i class="iconcis icon-share"></i>分享到&nbsp;</span>
                            <a><i class="iconcis icon-wxin c93"></i></a>
                            <a><i class="iconcis icon-qq c93"></i></a>
                            <a><i class="iconcis icon-weibo c93"></i></a>
                        </p>
                        <a class="btn" href="detail.html">了解更多<i class="iconcis icon-xnext"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <section class="product-list">
        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-3 mb-3">
                <div class="card photo-card">
                    <div class="card-img-top">
                        <figure class="figure">
                            <a href="photoDetail.html">
                                <img class="img-fluid" src="../../images/upload/photo_list_01.jpg">
                                <div class="photo-tags row card-tags">
                                    <span class="col-6"><i class="iconcis icon-clock"></i>|&nbsp;2017-03-01 13:41</span>
                                    <span class="col-3"><i class="iconcis icon-message"></i>|&nbsp;25842</span>
                                    <span class="col-3"><i class="iconcis icon-eye"></i>|&nbsp;25842</span>
                                    </p>
                                </div>
                                <div class="cis-mask">
                                    <div class="slide-boom-mask-back">
                                        <p>图片的主题标题文字像这样展示</p>
                                        <p>如果太长就这个第二行</p>
                                        <div class="line"></div>
                                    </div>
                                </div>
                            </a>
                        </figure>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3 mb-3">
                <div class="card photo-card">
                    <div class="card-img-top">
                        <figure class="figure">
                            <a href="photoDetail.html">
                                <img class="img-fluid" src="../../images/upload/photo_list_02.jpg">
                                <div class="photo-tags row card-tags">
                                    <span class="col-6"><i class="iconcis icon-clock"></i>|&nbsp;2017-03-01 13:41</span>
                                    <span class="col-3"><i class="iconcis icon-message"></i>|&nbsp;25842</span>
                                    <span class="col-3"><i class="iconcis icon-eye"></i>|&nbsp;25842</span>
                                    </p>
                                </div>
                                <div class="figure-caption">
                                    <div class="cis-mask">
                                        <div class="slide-boom-mask-back">

                                            <p>图片的主题标题文字像这样展示</p>
                                            <p>如果太长就这个第二行</p>
                                            <div class="line"></div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </figure>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3 mb-3">
                <div class="card photo-card">
                    <div class="card-img-top">
                        <figure class="figure">
                            <a href="photoDetail.html">
                                <img class="img-fluid" src="../../images/upload/photo_list_02.jpg">
                                <div class="photo-tags row card-tags">
                                    <span class="col-6"><i class="iconcis icon-clock"></i>|&nbsp;2017-03-01 13:41</span>
                                    <span class="col-3"><i class="iconcis icon-message"></i>|&nbsp;25842</span>
                                    <span class="col-3"><i class="iconcis icon-eye"></i>|&nbsp;25842</span>
                                    </p>
                                </div>
                                <div class="figure-caption">
                                    <div class="cis-mask">
                                        <div class="slide-boom-mask-back">

                                            <p>图片的主题标题文字像这样展示</p>
                                            <p>如果太长就这个第二行</p>
                                            <div class="line"></div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </figure>
                    </div>
                </div>
            </div>
            <div class="col-xs-12 col-sm-6 col-md-3 mb-3">
                <div class="card photo-card">
                    <div class="card-img-top">
                        <figure class="figure">
                            <a href="photoDetail.html">
                                <img class="img-fluid" src="../../images/upload/photo_list_04.jpg">
                                <div class="photo-tags row card-tags">
                                    <span class="col-6"><i class="iconcis icon-clock"></i>|&nbsp;2017-03-01 13:41</span>
                                    <span class="col-3"><i class="iconcis icon-message"></i>|&nbsp;25842</span>
                                    <span class="col-3"><i class="iconcis icon-eye"></i>|&nbsp;25842</span>
                                    </p>
                                </div>
                                <div class="figure-caption">
                                    <div class="cis-mask">
                                        <div class="slide-boom-mask-back">

                                            <p>图片的主题标题文字像这样展示</p>
                                            <p>如果太长就这个第二行</p>
                                            <div class="line"></div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </figure>
                    </div>
                </div>
            </div>
        </div>
        <div class="loadingmore text-center">加载更多</div>
    </section>
</div>
<style>
.photo-top-container {
    background: #e5e6e8;
}
.photo-tags {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    color: #9b9b9b;
    padding: 10px 0 10px 10px;
    font-size: 12px;
    z-index: 9;
}
.photo-mask p {
    max-height: 45px;
    line-height: 1.6;
    font-size: 13px;
    text-align: center;
    color: #f7f7f7;
    overflow: hidden;
}
.photo-mask .line {
    margin: 10px 0 0 40%;
    width: 20%;
    height: 2px;
    background: #fff;
}
@media (min-width: 992px) {
    .photo-mask p {
        font-size: 15px;
    }
}
.textures-info {
    padding: 60px 10px 20px 0;
}
@media (min-width: 576px) {
    .textures-info {
        padding: 40px 30px 20px;
    }
}
.textures-info h3 {
    position: relative;
    font-size: 1.5625rem;
    color: #2b2b2b;
    font-weight: 600;
    margin-bottom: 30px;
}
.textures-info h3:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 50px;
    height: 4px;
    background: #2b2b2b;
}
.textures-info .title {
    font-size: 1.25rem;
    color: #3f3f3f;
}
.textures-info .subtitle {
    font-size: 13px;
    color: #4f4f4f;
}
.textures-info .content {
    overflow: hidden;
    height: 84px;
    font-size: 14px;
    line-height: 2;
    text-indent: 30px;
    color: #4c4c4c;
}
</style>
<include file="public@common_footer">
<script>
    var swiper = new Swiper('.swiper-container', {
        autoplay: true,
        loop: true,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        }
    });

</script>
</body>
</html>
